<template>
	<el-container>
    
	  <el-header>
		 <el-row :gutter="20">
        <div class="grid-content" >
		      <div class="block" >
            <el-col :span="8">
            <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择起时日期">
            </el-date-picker>
            </el-col>
            <el-col :span="8">
            <el-date-picker
                v-model="value2"
                type="date"
                placeholder="选择结束日期">
            </el-date-picker>
            </el-col>
            <el-col :span="3" style="selfstyle">
            <el-button type="primary" @click="analysis()">数据分析</el-button>
            </el-col>
       </div>
		   </div>
		 </el-row>
		  </el-header>
      <!-- main -->
	  <el-main>
     <div id="main" style="background:#E6E6F6 ;width: 100%;height: 500px;"></div>
    </el-main>
  <!-- <Line_chart v-if="proFlag"></Line_chart> -->
	</el-container>
</template>

<script>
  import * as echarts from 'echarts';
  import axios from 'axios';
    export default {
	  	data() {
		  	return {
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
            
          },
        },
        value1: '',
        value2: '',
        proFlag:false,
        
    }
    },
    methods:{
      analysis(){
         let mtsoil_temperature=[];
         let mtsoil_moisture=[];
         let mtconductivity=[];
         let mtsoil_ph=[];
         let mtwind_direction=[];
         let mtwind_speed=[];
         let mtatmospheric_temperature=[];
         let mtatmospheric_humidity=[];
         let mtrainfall=[];
         let mtatmospheric_pressure=[];
         let mtpm2=[];
         let mtpm10=[];
         let mtevaporation_capacity=[];
         let mtminute=[];
         let date = [];
        if(this.value1==''||this.value2==''){
          this.$message({
                          message:"请选择日期",
                          type: 'warning'
                        })
             return;
        }
        if(this.value1.getTime() > this.value2.getTime()){
          this.$message({
                          message:"请选择正确日期",
                          type: 'warning'
                        })
             return;
        }
         axios.post(`/api/analysisMonit/analysis?date1=${this.value1}&date2=${this.value2}`)
          .then(({data}) => {
              if(data.code == 6666){
              this.$message({
                message: data.message,
                type: 'success'
              })
              data.entities.forEach(value => {
              // console.log(value)
              // console.log(value.mtSoilTemperature);
              mtsoil_temperature.push(value.mtSoilTemperature);
              console.log(mtsoil_temperature);
              mtsoil_moisture.push(value.mtSoilMoisture);
              mtconductivity.push(value.mtConductivity);
              mtsoil_ph.push(value.mtSoilPh);
              // mtwind_direction.push(value.mtWindSpeed);
              // mtwind_speed.push(value.mtWindDirection);
              mtatmospheric_temperature.push(value.mtAtmosphericTemperature);
              mtatmospheric_humidity.push(value.mtAtmosphericHumidity);
              // mtrainfall.push(value.mtRainfall);
              // mtatmospheric_pressure.push(value.mtAtmosphericPressure);
              mtpm2.push(value.mtPm2);
              mtpm10.push(value.mtPm10);
              mtevaporation_capacity.push(value.mtEvaporationCapacity);
              mtminute.push(value.mtMinute);
            })
       var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
          option = {
            dataset:[{

              source: [
              data.entities
              ]
            }],
            title: {
                text: '土壤墒情数据分析'
            },

            tooltip: {
                transitionDuration:0,
                trigger: 'axis'
            },
            legend: {
                  data: [
                      '土壤温度/℃',
                      '土壤湿度/%',
                      '电导率/ms/cm',
                      '土壤PH',
                      // '风向',
                      // '风速',
                      '大气温度/℃',
                      '大气湿度/%',
                      // '降雨量',
                      // '大气压力',
                      'PM2.5/ug/m³',
                      'PM10/ug/m³',
                      '蒸发量/mm',
                      // '时间'
                      ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap:false,
               data: data.date
            },
            yAxis: {
                type: 'time',
            },
            series: [
                {
                    name: '土壤温度/℃',
                    type: 'line',
                    stack: '总量',
                    // data: [120, 132, 101, 134, 90, 230, 210]
                    data: mtsoil_temperature
                },
                {
                    name: '土壤湿度/%',
                    type: 'line',
                    stack: '总量',
                    data: mtsoil_moisture
                },
                {
                    name: '电导率//ms/cm',
                    type: 'line',
                    stack: '总量',
                    data: mtconductivity
                },
                {
                    name: '土壤PH',
                    type: 'line',
                    stack: '总量',
                    data: mtsoil_ph
                },
                // {
                //     name: '风向',
                //     type: 'line',
                //     stack: '总量',
                //     data: [mtwind_direction]
                // },
                // {
                //     name: '风速',
                //     type: 'line',
                //     stack: '总量',
                //     data: [mtwind_speed]
                // },
                {
                    name: '大气温度/℃',
                    type: 'line',
                    stack: '总量',
                    data: mtatmospheric_temperature
                },
                {
                    name: '大气湿度/%',
                    type: 'line',
                    stack: '总量',
                    data: mtatmospheric_humidity
                },
                //    {
                //     name: '降雨量',
                //     type: 'line',
                //     stack: '总量',
                //     data: [mtrainfall]
                // },
                //    {
                //     name: '大气压力',
                //     type: 'line',
                //     stack: '总量',
                //     data: [mtatmospheric_pressure]
                // },
                   {
                    name: 'PM2.5/ug/m³',
                    type: 'line',
                    stack: '总量',
                    data: mtpm2
                },
                 {
                    name: 'PM10/ug/m³',
                    type: 'line',
                    stack: '总量',
                    data: mtpm10
                },
                 {
                    name: '蒸发量/mm',
                    type: 'line',
                    stack: '总量',
                    data: mtevaporation_capacity
                },
                //  {
                //     name: '时间',
                //     type: 'line',
                //     stack: '总量',
                //     data: mtminute
                // },
            ]
            
          };
            option && myChart.setOption(option);
              }else {
                this.$message({
                message: data.message,
                type: 'error'
              })
            }
            })
            .catch((e) => {
              console.log(e)
          })
        

  

    }
    }
}
</script>

<style scoped>
	.el-header{
	    color: #333;
	    text-align: center;
	    line-height: 45px;
      padding-left:100px ;
	  }
	  .el-row {
        margin: left 50px;
	      margin-bottom: 20px;
	    }
	    .el-col {
	      border-radius: 4px;
	    }
	    .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
</style>
